import {
  Image,
  Swiper,
  SwiperItem,
  SwiperProps,
  Text,
  View,
} from "@tarojs/components";
import React from "react";
import { ICarousel } from "../../types";
import "./index.scss";

interface CarouselProps extends SwiperProps {
  data: ICarousel[];
  height?: number;
  onClickItem?: (item: ICarousel) => void;
}

export const Carousel = ({
  height = 230,
  data,
  onClickItem,
  ...props
}: CarouselProps) => {
  const handleOnclick = (item: ICarousel) => {
    onClickItem?.(item);
  };

  return (
    <>
      <Swiper
        style={{ height: `${height}px` }}
        autoplay
        circular
        skipHiddenItemLayout
        scrollWithAnimation
        className="base-swiper"
        {...props}
      >
        {data.map((item) => (
          <SwiperItem
            key={item.id}
            className="base-swiper--item"
            onClick={() => handleOnclick(item)}
          >
            <Image
              fadeIn
              lazyLoad
              mode="aspectFill"
              className="base-swiper--image"
              src={item.cover_image}
            />
            <View className="mask-1" />
            <View className="overlay">
              <Text className="title">{item.name}</Text>
            </View>
          </SwiperItem>
        ))}
      </Swiper>
    </>
  );
};
